<template>
  <div id="app">
    <nav>
      <router-link v-for="(item,index) in $router.options.routes" :key="index" :to="item.path">{{item.name }}</router-link>
    </nav>
    <div class="war_view_box">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  place-items: flex-start;
  flex-wrap: wrap;
  overflow: hidden;

}


nav {
  width: 10%;
  height: 100%;
  padding: 1%;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}

.war_view_box{
  width: 88%;
  height: 100%;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}
</style>
